<template>
  <div id="app">
    <div id="header">
      <img class="logo" src="./assets/image/logo_01.png">
      <div class="nav">
        <router-link to="/home">首页</router-link>
        <router-link to="/product">产品中心</router-link>
        <router-link to="/scheme">解决方案</router-link>
        <router-link to="/about">关于我们</router-link>
      </div>
    </div>
    <router-view/>
    <div class="footer">
      <div class="footer-nav">
        <router-link to="/home">首页</router-link>
        <router-link to="/product">产品中心</router-link>
        <img src="./assets/image/logo_02.png">
        <router-link to="/scheme">解决方案</router-link>
        <router-link to="/about">关于我们</router-link>
      </div>
      <div class="footer-word">
        <p>@2019 恒古静心（天津）科技有限公司 版权所有</p>
      </div>
    </div>
  </div>
</template>

<style lang="less">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#header {
  width: 1200px;
  margin: 0 auto;
  height:120px;
  line-height: 120px;
  display: flex;
  justify-content:space-between;
  align-items: center;
  .nav {
    font-size: 16px;
    a {
      display: inline-block;
      width: 90px;
      height:40px;
      line-height: 40px;
      text-align: center;
      color:#333333;
      margin-left: 8px;
    }
    a.router-link-active {
      background: #1491EF;
      color: #ffffff;
    }
  }
}
.footer {
  background: #26282B;
}
.footer-word {
  color: #999999;
  font-size: 14px;
  text-align: center;
  line-height: 92px;
  border-top: 2px solid #444444;
}
.footer-nav {
  width: 900px;
  height:167px;
  line-height: 167px;
  margin: 70px auto 0;
  display: flex;
  color: #999999;
  justify-content: center;
  align-items: center;
  a {
    color: #999999;
    margin-right: 80px;
  }
  img {
    margin-right: 100px;
  }
}
</style>
